<template>
  <div class="app-container" id="supplierafter">
    <div style="background-color: #fff">
      <div class="container-module" style="padding-bottom: 0">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item class="search-form-item" label="订单流水号" style="margin: 5px 0">
                <el-input clearable placeholder="请输入订单流水号" v-model="searchForm.order_trade_no" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" class="search-form-item" label="支付单号" style="margin: 5px 0">
                <el-input clearable placeholder="请输入支付单号" v-model="searchForm.pay_order_no" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item v-if="searchDisplay" class="search-form-item" label="收货人电话" style="margin: 5px 0">
                <el-input clearable placeholder="请输入收货人电话" v-model="searchForm.addr_phone_number" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" label="售后状态" style="margin: 5px 0">
                <el-select clearable v-model="searchForm.status" placeholder="请选择售后状态">
                  <el-option v-for="item in [
                      { name: '待用户退货', id: 1 },
                      { name: '待确认收货', id: 2 },
                      { name: '待确认发货', id: 3 },
                      { name: '待用户确认收货', id: 4 },
                      { name: '待平台退款', id: 5 },
                      { name: '处理完成', id: 6 },
                    ]" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="供货商商品ID" style="margin: 5px 0">
                <el-input clearable placeholder="请输入供货商商品ID" v-model="searchForm.supplier_goods_id"
                  onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="商品名称检索" style="margin: 5px 0">
                <el-input clearable placeholder="请输入商品名称检索" v-model="searchForm.supplier_goods_name" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="供货商ID" style="margin: 5px 0">
                <el-input clearable placeholder="请输入供货商ID" v-model="searchForm.supplier_id" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="根据用户昵称" style="margin: 5px 0">
                <el-input clearable placeholder="请输入根据用户昵称" v-model="searchForm.user_nickname"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="用户手机号" style="margin: 5px 0">
                <el-input clearable placeholder="请输入用户手机号" v-model="searchForm.user_mobile" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="收货人姓名" style="margin: 5px 0">
                <el-input clearable placeholder="请输入收货人姓名" v-model="searchForm.addr_recipient" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>

              <el-form-item class="search-form-item" v-if="searchDisplay" label="收货地址" style="margin: 5px 0">
                <el-input clearable placeholder="请输入收货地址" v-model="searchForm.addr_details" type="text" min="1"
                  class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="申请起始时间" style="margin: 5px 0">
                <el-date-picker v-model="create_time" type="datetimerange" @change="create_timeWay"
                  value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                  align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="search-form-item" v-if="searchDisplay" label="支付起始时间" style="margin: 5px 0">
                <el-date-picker v-model="pay_time" type="datetimerange" @change="pay_timeWay"
                  value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                  align="right">
                </el-date-picker>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                <el-button v-if="!searchDisplay" icon="el-icon-caret-bottom"
                  @click="searchDisplay = true">展开</el-button>
                <el-button v-else icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 20px 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :span="20"> </el-col>
            <el-col :span="4" style="float: right">
              <div class="right-panel el-button-group">
                <el-button class="" icon="el-icon-refresh" size="mini" @click="getListWay"></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                      <el-checkbox v-model="checkboxTableThead"
                        :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table ref="tablerefs" highlight-current-row :data="SupplyRefundList" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" height="100%" v-loading="loading">
              <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label" :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                " align="center">
                <template slot-scope="scope">
                  <div v-if="fruit == 'supplier_goods_main_image'" style="
                      width: 30px;
                      height: 30px;
                      border-radius: 5px;
                      overflow: hidden;
                      margin: 0 auto;
                    ">
                    <el-image v-if="scope.row[fruit]" :src="scope.row[fruit]" :preview-src-list="[scope.row[fruit]]" />
                  </div>
                  <div v-else-if="fruit == 'type'" style="color: #0076f6;">
                    <div v-if="scope.row[fruit] == 1">仅退款</div>
                    <div v-if="scope.row[fruit] == 2">退货退款</div>
                    <div v-if="scope.row[fruit] == 3">换货</div>
                  </div>

                  <span v-else>
                    <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" label="状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.status == 0" style="color: #ff4949;">待处理</div>
                  <div v-if="scope.row.status == 1" style="color: #0076f6;">待用户退货</div>
                  <div v-if="scope.row.status == 2" style="color: #0076f6;">处理中</div>
                  <div v-if="scope.row.status == 6" style="color: #81b337;">处理完成</div>
                  <div v-if="scope.row.status == 3" style="color: #0076f6;">处理中</div>
                  <div v-if="scope.row.status == 4" style="color: #0076f6;">待用户确认收货</div>
                  <div v-if="scope.row.status == 5" style="color: #0076f6;">待平台退款</div>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" width="160" prop="address" label="操作">

                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="suppDetailsWay(scope.row)">
                    详情
                  </el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button
                    type="text"
                    size="mini"
                    @click="suppDetailsWay(scope.row)"
                  >
                    审核
                  </el-button>
                  <!-- <el-button v-if="scope.row.status == 1" type="text" size="mini">待用户退货</el-button>

                  <el-button v-if="scope.row.status == 5" type="text" size="mini">待平台退款</el-button>

                  <el-button v-if="scope.row.status == 4" type="text" size="mini">待用户确认收货</el-button>

                  <el-button v-hasPermi="'orderlist/supplierafter/qrjh'" v-if="scope.row.status == 2" type="text"
                    size="mini" @click="confirmHandle(scope.row)">确认寄回</el-button>

                  <el-button v-if="scope.row.status == 6" type="text" size="mini">处理完成</el-button> -->
                </template>
              </el-table-column>
            </el-table></el-col>
        </el-row>
        <el-row style="text-align: right">
          <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
            @pagination="getListWay" />
        </el-row>
      </div>
    </div>
    <!-- 确认收货弹框 -->
    <!-- <el-dialog title="确认收货" :close-on-click-modal="false" :visible.sync="confirmDialog" width="800px"
      @close="confirmClose" custom-class="custorm">
      <el-row style="position: relative" v-loading="confirmLoading">
        <el-form label-width="110px" :model="confirmForm" :rules="confirmRules" ref="confirmForm">
          <el-col :span="22">
            <el-form-item label="收到货物数量" prop="refund_number">
              <el-input type="text" placeholder="请输入收到货物数量" show-word-limit clearable
                v-model.trim="confirmForm.refund_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="货物图片">
              <logo-upload :file-list="imgs" :show-file-list="true" accept="image/jpeg, image/png"
                @uploadCallback="imgsCallback" />
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="备注">
              <el-input type="textarea" placeholder="请输入备注" maxlength="200" show-word-limit clearable
                :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="confirmForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 详情 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="订单信息" size="70%" :withHeader="false"
      :visible.sync="detaildialog" @close="addressClose" :show-close="true">
      <div style="position: relative" v-loading="detailLoading">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 105px)">
          <div class="drawerTitle">
            <span>售后订单详情</span>
            <div class="close" @click="addressClose">
              <i class="el-icon-close" style="font-size: 24px;"></i>
            </div>
          </div>

          <div class="drawerContent" style="padding: 20px 30px;">
            <div class="refund_tracking_number">退款单号：SHDH81248135135</div>
            <div class="after_sales_status">
             <div class="status">
               <span class="after_sales">售后状态</span>

               <span v-if="detailsrefund.status == 0" class="orderstatus">待处理</span>
               <span v-if="detailsrefund.status == 1" class="orderstatus">待用户退货</span>
               <span v-if="detailsrefund.status == 2" class="orderstatus">处理中</span>
               <span v-if="detailsrefund.status == 6" class="orderstatus">处理完成</span>
               <span v-if="detailsrefund.status == 3" class="orderstatus">处理中</span>
               <span v-if="detailsrefund.status == 4" class="orderstatus">待用户确认收货</span>
               <span v-if="detailsrefund.status == 5" class="orderstatus">待平台退款</span>
             </div>
             <!-- <div class="status">
               <span class="after_sales">售后人员</span>
               <span>-</span>
             </div> -->
             <div class="status" style="width: 200px;">
               <span class="after_sales">售后时间</span>
               <span>{{detailsrefund.created_at}}</span>
             </div>
             <div style="flex: 1;"></div>
              <div>
                 <!-- v-hasPermi="'orderlist/supplierafter/qrjh'" -->
                <el-button v-if="detailsrefund.status == 2" type="primary"
                  size="mini" @click="confirmHandle(detailsrefund)">售后处理</el-button>
                  <!-- <el-button v-hasPermi="'orderlist/supplierafter/qrjh'" v-if="detailsrefund.status == 3" type="primary"
                    size="mini" @click="confirmHandle(detailsrefund)">确认换货</el-button>
                    <el-button v-hasPermi="'orderlist/supplierafter/qrjh'" v-if="detailsrefund.status == 5" type="primary"
                      size="mini" @click="confirmHandle(detailsrefund)">确认退款</el-button> -->
              </div>
            </div>
            <!-- <div class="infoView">
              <div class="status">
                <span>售后单号：</span>
                <span>SHDH81248135135</span>
              </div>
              <el-descriptions style="width: 50%" :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
                  label="商户名称">
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
                  label="联系人">
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
                  label="商户状态">
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
                  label="联系电话">
                </el-descriptions-item>
              </el-descriptions>
            </div> -->
            <div class="tabsView">
              <el-tabs v-model="activeNames">
                <el-tab-pane label="订单详情" name="order_details"></el-tab-pane>
                <el-tab-pane label="售后信息" name="refound_information"></el-tab-pane>
              </el-tabs>
            </div>
            <!-- <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品分类">
                  {{supplier_goods.category1_name}} {{supplier_goods.category2_name}}
                  {{supplier_goods.category3_name}}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="供货商">
                  我是供货商--123
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品名称">

                    <el-tooltip
                      placement="top-start"
                      :content="supplier_goods.goods_name"
                    >
                      <div class="one_line_hidden">
                        {{ supplier_goods.goods_name ? supplier_goods.goods_name : "-" }}
                      </div>
                    </el-tooltip>

                </el-descriptions-item>

                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品图片">
                  <div style="width: 40px; height: 40px">
                    <el-image :src="
                      supplier_goods.main_image
                        ? supplier_goods.main_image
                        : '-'
                    " :preview-src-list="[
                      supplier_goods.main_image
                        ? supplier_goods.main_image
                        : '-',
                    ]" />
                  </div>
                </el-descriptions-item>

                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品规格">
                  {{
                  supplier_goods.sku_name
                    ? supplier_goods.sku_name
                    : "-"
                }}</el-descriptions-item>

              </el-descriptions>
            </div> -->
            <div v-if="activeNames == 'order_details'">
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">会员信息</div>
                </div>
                <div class="right"></div>
              </div>
              <div style="padding: 0 10px">
                <el-descriptions :column="2">
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="会员昵称">
                    <span style="color: #0076f6;font-weight: 500;">
                    {{
                    objdetails.user ? objdetails.user.nickname : "-"

                  }}</span></el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="联系电话">
                    {{
                    objdetails.user ? objdetails.user.mobile : "-"
                  }}</el-descriptions-item>


                </el-descriptions>
              </div>
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">会员收货信息</div>
                </div>
                <div class="right"></div>
              </div>
              <div style="padding: 0 10px;">
                <el-descriptions :column="2">
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="配送方式">
                    快递</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="联系电话">
                    {{
                    supplier_address.phone_number ? supplier_address.phone_number : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="收货人">
                    {{
                    supplier_address.recipient ? supplier_address.recipient : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="收货地址">
                    {{
                    supplier_address.address_details ? supplier_address.province_name +supplier_address.district_name +supplier_address.city_name + supplier_address.address_details : "-"
                  }}</el-descriptions-item>

                </el-descriptions>
              </div>
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">订单商品信息</div>
                </div>
                <div class="right"></div>
              </div>
              <div style="padding: 0 10px">
                <el-descriptions :column="2">
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="购物编号">
                     <span style="color: #0076f6;font-weight: 500;">
                    {{
                    detailsObj.order_trade_no ? detailsObj.order_trade_no : "-"
                  }}
                  </span>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="创建时间">
                    {{
                    detailsObj.created_at ? detailsObj.created_at : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="订单状态">
                   <span v-if="detailsrefund.status == 0" class="orderstatus">申请售后-待处理</span>
                   <span v-if="detailsrefund.status == 1" class="orderstatus">申请售后-处理中</span>
                   <span v-if="detailsrefund.status == 2" class="orderstatus">申请售后-已完成</span>
                   <span v-if="detailsrefund.status == 6" class="orderstatus">申请售后-已完成</span>
                   <span v-if="detailsrefund.status == 3" class="orderstatus">申请售后-审核未通过</span>
                   <span v-if="detailsrefund.status == 4" class="orderstatus">申请售后-处理中</span>
                   <span v-if="detailsrefund.status == 5" class="orderstatus">申请售后-处理中</span>
                   </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="物流状态">
                    <span v-if="detailsrefund.status == 1">已收货</span>
                    <span v-if="detailsrefund.status == 2">未收货</span>
                    <span v-if="detailsrefund.status == 3">已发货</span>
                   </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品分类">
                    {{supplier_goods.category1_name}} {{supplier_goods.category2_name}}
                    {{supplier_goods.category3_name}}
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品名称">

                      <el-tooltip
                        placement="top-start"
                        :content="supplier_goods.goods_name"
                      >
                        <div class="one_line_hidden">
                          {{ supplier_goods.goods_name ? supplier_goods.goods_name : "-" }}
                        </div>
                      </el-tooltip>

                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品图片">
                    <div style="width: 40px; height: 40px">
                      <el-image :src="
                        supplier_goods.main_image
                          ? supplier_goods.main_image
                          : '-'
                      " :preview-src-list="[
                        supplier_goods.main_image
                          ? supplier_goods.main_image
                          : '-',
                      ]" />
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品规格">
                    {{
                    supplier_goods.sku_name
                      ? supplier_goods.sku_name
                      : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="采购数量">
                    {{
                    detailsObj.buy_number ? detailsObj.buy_number : "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="商品售价">
                    <span v-if="detailsObj.pay_type == 1">{{detailsObj.price_unit}}<span style="font-size: 12px;">￥</span></span>
                    <span v-if="detailsObj.pay_type == 2">{{detailsObj.points_unit}}积分</span>
                    <span v-if="detailsObj.pay_type == 3">{{detailsObj.coupon_unit}}提货券</span>
                    <span v-if="detailsObj.pay_type == 4">{{detailsObj.points_unit}}积分 +
                      {{detailsObj.coupon_unit}}提货券</span>
                    <span v-if="detailsObj.pay_type == 5">{{detailsObj.price_unit}}<span style="font-size: 12px;">￥</span> + {{detailsObj.points_unit}}积分
                      </span>
                    <span v-if="detailsObj.pay_type == 6">{{detailsObj.price_unit}}<span style="font-size: 12px;">￥</span> + {{detailsObj.coupon_unit}}提货券
                      </span>
                    <span v-if="detailsObj.pay_type == 7">{{detailsObj.price_unit}}<span style="font-size: 12px;">￥</span> + {{detailsObj.coupon_unit}}提货券 +
                      {{detailsObj.points_unit}}积分</span>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="实付款">
                    <span v-if="detailsObj.pay_type == 1">{{detailsObj.pay_total}}<span style="font-size: 12px;">￥</span></span>
                    <span v-if="detailsObj.pay_type == 2">{{detailsObj.points_total}}积分</span>
                    <span v-if="detailsObj.pay_type == 3">{{detailsObj.coupon_total}}提货券</span>
                    <span v-if="detailsObj.pay_type == 4">{{detailsObj.points_total}}积分 +
                      {{detailsObj.coupon_total}}提货券</span>
                    <span v-if="detailsObj.pay_type == 5"> {{detailsObj.pay_total}}<span style="font-size: 12px;">￥</span> + {{detailsObj.points_total}}积分
                     </span>
                    <span v-if="detailsObj.pay_type == 6">{{detailsObj.pay_total}}<span style="font-size: 12px;">￥</span> + {{detailsObj.coupon_total}}提货券
                      </span>
                    <span v-if="detailsObj.pay_type == 7">{{detailsObj.pay_total}}<span style="font-size: 12px;">￥</span> + {{detailsObj.coupon_total}}提货券 +
                      {{detailsObj.points_total}}积分</span>

                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="支付方式">
                    <span v-if="detailsObj.pay_type == 1">现金</span>
                    <span v-if="detailsObj.pay_type == 2">积分</span>
                    <span v-if="detailsObj.pay_type == 3">提货券</span>
                    <span v-if="detailsObj.pay_type == 4">积分 + 提货券</span>
                    <span v-if="detailsObj.pay_type == 5">积分 + 现金</span>
                    <span v-if="detailsObj.pay_type == 6">提货券 + 现金</span>
                    <span v-if="detailsObj.pay_type == 7">现金 + 提货券 + 积分</span>
                  </el-descriptions-item>
                  <!-- <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="支付单号">
                    {{
                    detailsObj.pay_order_no ? detailsObj.pay_order_no : "-"
                  }}</el-descriptions-item> -->
                  <!-- <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="支付时间">
                    {{
                    detailsObj.created_at ? detailsObj.created_at : "-"
                  }}</el-descriptions-item> -->
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="所属商户">
                    {{
                    objdetails.merchant_info ? objdetails.merchant_info : "自营"
                  }}</el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="供货商">
                   <span style="color: #0076f6;font-weight: 500;">
                     {{
                       objdetails.supplier_info ? objdetails.supplier_info.name + '(' + 'id:' + objdetails.supplier_info.id +')' : "-"
                     }}
                   </span>
                   </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>

            <div v-if="activeNames == 'refound_information'">
              <div>
                <div class="informationTitleView">
                  <div class="leftBox">
                    <div class="leftborder"></div>
                    <div class="text">售后信息</div>
                  </div>
                  <div class="right"></div>
                </div>
                <div style="padding: 0 10px">
                  <el-descriptions :column="2">
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="售后时间">
                      {{
                      detailsrefund.created_at ? detailsrefund.created_at : "-"
                    }}</el-descriptions-item>
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="退款方式">
                     <span v-if="detailsObj.pay_type == 1">现金</span>
                     <span v-if="detailsObj.pay_type == 2">积分</span>
                     <span v-if="detailsObj.pay_type == 3">提货券</span>
                     <span v-if="detailsObj.pay_type == 4">积分 + 提货券</span>
                     <span v-if="detailsObj.pay_type == 5">积分 + 现金</span>
                     <span v-if="detailsObj.pay_type == 6">提货券 + 现金</span>
                     <span v-if="detailsObj.pay_type == 7">现金 + 提货券 + 积分</span>
                     </el-descriptions-item>
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="退货数量">
                      {{
                      detailsObj.buy_number ? detailsObj.buy_number : "-"
                    }}</el-descriptions-item>
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="退款总额">
                      <span v-if="detailsObj.pay_type == 1">{{detailsrefund.balance_total}}</span>
                      <span v-if="detailsObj.pay_type == 2">{{detailsrefund.points_total}}积分</span>
                      <span v-if="detailsObj.pay_type == 3">{{detailsrefund.coupon_total}}提货券</span>
                      <span v-if="detailsObj.pay_type == 4">{{detailsrefund.points_total}}积分 +
                        {{detailsrefund.coupon_total}}提货券</span>
                      <span v-if="detailsObj.pay_type == 5">{{detailsrefund.points_total}}积分 +
                        {{detailsrefund.balance_total}}</span>
                      <span v-if="detailsObj.pay_type == 6">{{detailsrefund.coupon_total}}提货券 +
                        {{detailsrefund.balance_total}}</span>
                      <span v-if="detailsObj.pay_type == 7">{{detailsrefund.balance_total}} +
                        {{detailsrefund.coupon_total}}提货券 + {{detailsrefund.points_total}}积分</span>

                    </el-descriptions-item>
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="售后原因">
                      {{detailsrefund.reason}}
                    </el-descriptions-item>
                    <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                      label="售后图片">
                      <div v-if="detailsrefund.imgs.length > 0" v-for="(item, index) in detailsrefund.imgs" :key="index" style="
                          width: 40px;
                          height: 40px;
                          border-radius: 10px;
                        ">
                        <el-image :src="item ? item : '-'" :preview-src-list="[item ? item : '-']" />
                      </div>
                      <!-- <div style="width: 40px; height: 40px">
                        <el-image :src="
                          detailsrefund.imgs
                            ? detailsrefund.imgs.
                            : '-'
                        " :preview-src-list="[
                          detailsrefund.imgs
                            ? detailsrefund.imgs
                            : '-',
                        ]" />
                      </div> -->
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
                <!-- 售后记录 -->
                <div class="informationTitleView">
                  <div class="leftBox">
                    <div class="leftborder"></div>
                    <div class="text">售后记录</div>
                  </div>
                  <div class="right"></div>
                </div>
                <!--  -->
                <el-table
                  :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                  }"
                  highlight-current-row
                  :data="recordList"
                  style="width: 100%"
                  v-loading="recordLoading"
                >
                  <el-table-column
                    align="center"
                    width="100"
                    prop="id"
                    label="ID"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    width="150"
                    prop="created_at"
                    label="处理时间"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="tag_name"
                    label="操作角色"
                  >
                  <template slot-scope="scope">
                    <span v-if="scope.row.from_type == 1">平台</span>
                    <span v-if="scope.row.from_type == 2">供货商</span>
                    <span v-if="scope.row.from_type == 3">用户</span>
                   </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="admin_name"
                    label="售后人员"
                  >
                  <template slot-scope="scope">
                    <span>{{scope.row.admin_name ? scope.row.admin_name : '-'}}</span>

                   </template>
                  <!-- <el-descriptions-item label="日志类别">
                    <el-tag size="mini" v-if="item.from_type == 1">普通日志</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 2">退回地址记录</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 3">商品寄回日志</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 4">商品发货日志</el-tag>
                  </el-descriptions-item> -->
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="abst"
                    label="售后状态"
                  >
                  <template slot-scope="scope">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.abst + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.abst ? scope.row.abst : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                  </el-table-column>
                  <el-table-column
                    prop="remark"
                    label="处理说明"
                    min-width="70"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-tooltip
                        placement="top-start"
                        :content="scope.row.remark"
                      >
                        <div class="one_line_hidden">
                          {{ scope.row.remark ? scope.row.remark : "-" }}
                        </div>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column
                    align="center"
                    prop="created_at"
                    label="创建时间"
                  >
                  <template slot-scope="scope">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.created_at"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.created_at ? scope.row.created_at : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                  </el-table-column> -->
                  <el-table-column
                    align="center"
                    fixed="right"
                    prop="address"
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button
                        style="margin-right: 10px"
                        type="text"
                        size="mini"
                        @click="puttagsWay(scope.row)"
                      >
                        详情
                      </el-button>

                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-scrollbar>

      </div>
    </el-drawer>
    <!--  -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="确认寄回" size="50%" :withHeader="false"
      :visible.sync="confirmDialog" @close="confirmClose" :show-close="true">
      <div class="drawerTitle">
        <span>确认寄回</span>
        <div class="close" @click="confirmClose">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <el-scrollbar
        wrap-style="overflow-x:hidden;"
        style="height: calc(100vh - 150px)"
      >
      <div class="drawerContent">
        <el-row style="position: relative" v-loading="confirmLoading">
          <el-form label-width="110px" :model="confirmForm" :rules="confirmRules" ref="confirmForm">
            <el-col :span="22">
              <el-form-item label="收到货物数量" prop="refund_number">
                <el-input type="text" placeholder="请输入收到货物数量" show-word-limit clearable
                  v-model.trim="confirmForm.refund_number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="货物图片">
                <logo-upload :file-list="imgs" :show-file-list="true" accept="image/jpeg, image/png"
                  @uploadCallback="imgsCallback" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="备注">
                <el-input type="textarea" placeholder="请输入备注" maxlength="200" show-word-limit clearable
                  :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="confirmForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
            <el-button @click="confirmDialog = false">取 消</el-button>
            <el-button type="primary" @click="confirmSubmit">确 定</el-button>
          </el-col>
    </el-drawer>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="售后详情" size="50%" :withHeader="false"
      :visible.sync="detailsafterDrawer" @close="afterClose" :show-close="true">
      <div style="position: relative">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 105px)">
          <div class="drawerTitle">
            <span>售后详情</span>
            <div class="close" @click="afterClose">
              <i class="el-icon-close" style="font-size: 24px;"></i>
            </div>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">售后信息</div>
            </div>
            <div class="right"></div>
          </div>
          <div style="padding: 0 10px;">
            <el-descriptions :column="2">
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="ID">
                {{afterinformation.id}}</el-descriptions-item>
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="处理时间">
                {{
                afterinformation.created_at ? afterinformation.created_at : "-"
              }}</el-descriptions-item>
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="操作角色">
                  <span v-if="afterinformation.from_type == 1">平台</span>
                  <span v-if="afterinformation.from_type == 2">供货商</span>
                  <span v-if="afterinformation.from_type == 3">用户</span>
                </el-descriptions-item>
              <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                label="售后人员">
                <span>{{afterinformation.admin_name ? afterinformation.admin_name : '-'}}</span>
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="售后状态">
                  <span>{{afterinformation.abst ? afterinformation.abst : '-'}}</span>
                  </el-descriptions-item>
                  <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                    label="处理说明">
                   <el-tooltip
                     placement="top-start"
                     :content="afterinformation.remark"
                   >
                     <div class="one_line_hidden">
                       {{ afterinformation.remark ? afterinformation.remark : "-" }}
                     </div>
                   </el-tooltip>
                    </el-descriptions-item>
            </el-descriptions>
          </div>

        </el-scrollbar>

      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {
    getSupplyRefundList,
    setGoodsBackConfirm,
    getRefundDetail,
    getRefundHistory,
  } from "@/api/order/index";
  import LogoUpload from "@/components/FileUpload";
  const tableTheadOption = {
    created_at: {
      label: "申请时间",
      field: "created_at",
      width: 140,
    },
    refund_id: {
      label: "售后订单ID",
      field: "refund_id",
      width: 100,
    },
    refund_order_no: {
      label: "售后订单编号",
      field: "refund_order_no",
      width: 220,
    },
    user_nickname: {
      label: "用户昵称",
      field: "user_nickname",
      width: 200,
    },
    pay_order_no: {
      label: "支付单号",
      field: "pay_order_no",
      width: 200,
    },
    supplier_id: {
      label: "供货商ID",
      field: "supplier_id",
    },
    supplier_name: {
      label: "供货商名称",
      field: "supplier_name",
      width: 100,
    },
    supplier_goods_id: {
      label: "商品ID",
      field: "supplier_goods_id",
    },
    supplier_goods_name: {
      label: "商品名称",
      field: "supplier_goods_name",
      width: 220,
    },
    supplier_goods_main_image: {
      label: "商品图片",
      field: "supplier_goods_main_image",
    },
    supplier_sku_name: {
      label: "规格名称",
      field: "supplier_sku_name",
    },
    supplier_sku_unit: {
      label: "规格单位",
      field: "supplier_sku_unit",
    },
    supplier_sku_retail_price: {
      label: "规格零售价",
      field: "supplier_sku_retail_price",
    },
    type: {
      label: "售后类型",
      field: "type",
      width: 120,
    },
    refund_number: {
      label: "退货数量",
      field: "refund_number",
    },
  };
  const allTableThead = [

    "refund_id",
    "refund_order_no",
    "pay_order_no",

    "supplier_id",
    "supplier_name",
    "supplier_goods_id",
    "supplier_goods_name",
    "user_nickname",
    "created_at",
    "supplier_goods_main_image",
    "supplier_sku_name",
    "supplier_sku_unit",
    "supplier_sku_retail_price",
    "type",
    "refund_number",
  ];
  const defaultTableThead = [

    // "refund_id",
    "refund_order_no",
    // "pay_order_no",

    // "supplier_name",
    "supplier_goods_name",
    "type",
    "user_nickname",
    "created_at",
    // "supplier_goods_main_image",
    // "supplier_sku_name",

    // "refund_number",
  ];
  export default {
    components: {
      LogoUpload
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
        this.$nextTick(() => {
          this.$refs.tablerefs.doLayout();
        });
      },
    },
    data() {
      return {
        recordLoading: false,
        detailsafterDrawer:false,
        afterinformation:{},
        recordList:[],
        TagList: [],
        activeNames: "order_details",
        detailLoading: false,
        objdetails:{},
        supplier_address:{},
        detailsObj: {},
        detailsrefund: {},
        supplier_goods: {},
        detaildialog: false,
        // 默认表头
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        searchDisplay: false,
        loading: true,
        searchForm: {
          supplier_goods_id: "", // 供货商商品ID检索
          supplier_goods_name: "", // 商品名称检索
          supplier_id: "", // 供货商ID检索
          order_trade_no: "", // 订单流水号检索
          pay_order_no: "", // 根据订单支付单号检索
          user_nickname: "", // 根据用户昵称检索
          user_mobile: "", // 根据用户手机号检索
          addr_recipient: "", // 根据收货人姓名检索
          addr_phone_number: "", // 收货人电话检索
          addr_details: "", // 根据收货地址检索
          status: "", // 售后状态：1=待用户退货；2=待供货商确认收货；3=待供货商确认发货（换货存在此状态）；4=待用户确认收货（换货存在此状态）；5=待平台退款；6=处理完成
          create_time_start: "", // 下单起始时间（例：2023-10-01 12:20）
          create_time_end: "", // 下单截至时间（例：2023-10-02 12:20）
          pay_time_start: "", // 支付起始时间（例：2023-10-01 12:20）
          pay_time_end: "", // 支付成截至时间（例：2023-10-02 12:20）
          page: 1, // 页码（默认1）
          count: 20, // 每页数量（默认10）
        },
        create_time: [],
        pay_time: [],
        SupplyRefundList: [],
        total: 0,
        confirmDialog: false,
        confirmLoading: false,
        confirmForm: {
          refund_id: "",
          refund_number: "",
          remark: "",
          imgs: "",
        },
        imgs: [],
        confirmRules: {
          refund_number: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入收到货物数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
      };
    },
    created() {

      this.getListWay();
    },
    methods: {
      puttagsWay(row){
        this.afterinformation = row
        this.detailsafterDrawer = true
      },
      afterClose(){
        this.detailsafterDrawer = false
      },
      //售后记录
      getListrecord(row) {
        this.recordLoading = true;
        getRefundHistory({ refund_id: row.refund_id }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.recordLoading = false;
            return this.$messages.error(res.msg);
          }
          this.recordLoading = false;
          this.recordList = res.data
        });
      },
      suppDetailsWay(row) {
        this.activeNames = 'order_details'
        // this.detailsObj = row
        this.detaildialog = true
        this.detailLoading = true;
        getRefundDetail({
          refund_id: row.refund_id
        }).then((res) => {
          this.objdetails = res.data
          this.detailsObj = res.data.buy_order
          this.detailsrefund = res.data.refund
          this.supplier_goods = res.data.supplier_goods
          this.supplier_address = res.data.user_order_address
          if (res.code !== 200 || res.status !== 1) {
            this.detailLoading = false;
            return this.$messages.error(res.msg);
          }
          // this.recordsList = res.data;
          this.detailLoading = false;
        });
        this.getListrecord(row);
      },
      //关闭详情弹窗
      addressClose() {
        this.detaildialog = false
      },
      getListWay() {
        this.loading = true;
        getSupplyRefundList(this.searchForm)
          .then((res) => {
            this.loading = false;
            if (res.code !== 200 || res.status !== 1) {
              this.confirmLoading = false;
              return this.$messages.error(res.msg);
            }
            this.SupplyRefundList = res.data.list;
            this.total = res.data.total;
          })
          .catch((err) => {
            this.loading = false;
            this.$messages.error(err.msg);
          });
      },
      resetting() {
        this.searchForm = {
          supplier_goods_id: "", // 供货商商品ID检索
          supplier_goods_name: "", // 商品名称检索
          supplier_id: "", // 供货商ID检索
          order_trade_no: "", // 订单流水号检索
          pay_order_no: "", // 根据订单支付单号检索
          user_nickname: "", // 根据用户昵称检索
          user_mobile: "", // 根据用户手机号检索
          addr_recipient: "", // 根据收货人姓名检索
          addr_phone_number: "", // 收货人电话检索
          addr_details: "", // 根据收货地址检索
          status: "", // 售后状态：1=待用户退货；2=待供货商确认收货；3=待供货商确认发货（换货存在此状态）；4=待用户确认收货（换货存在此状态）；5=待平台退款；6=处理完成
          create_time_start: "", // 下单起始时间（例：2023-10-01 12:20）
          create_time_end: "", // 下单截至时间（例：2023-10-02 12:20）
          pay_time_start: "", // 支付起始时间（例：2023-10-01 12:20）
          pay_time_end: "", // 支付成截至时间（例：2023-10-02 12:20）
          page: 1, // 页码（默认1）
          count: 20, // 每页数量（默认10）
        };
        this.getListWay();
      },
      create_timeWay(vla) {
        this.searchForm.create_time_start = vla[0];
        this.searchForm.create_time_end = vla[1];
      },
      pay_timeWay(vla) {
        this.searchForm.pay_time_start = vla[0];
        this.searchForm.pay_time_end = vla[1];
      },
      confirmClose() {
        this.confirmForm = {
          refund_id: "",
          refund_number: "",
          remark: "",
          imgs: "",
        };
        this.imgs = [];
      },
      imgsCallback(file) {
        this.imgs = file;
      },
      confirmHandle(row) {
        this.confirmForm.refund_id = row.refund_id;
        this.confirmForm.refund_number = row.refund_number;
        this.confirmDialog = true;
      },
      confirmSubmit() {
        this.$refs.confirmForm.validate((valid) => {
          if (valid) {
            this.confirmLoading = true;
            var arr = [];
            this.imgs.forEach((item) => {
              arr.push(item.url);
            });
            this.confirmForm.imgs = arr.toString();
            setGoodsBackConfirm(this.confirmForm).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.confirmLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.confirmLoading = false;
              this.confirmDialog = false;
              this.getListWay();
            });
          } else {
            return false;
          }
        });
      },
    },
  };
</script>

<style>
  #supplierafter .el-upload--picture-card {
    width: 90px !important;
    height: 90px !important;
    line-height: 90px;
  }

  #supplierafter .el-upload-list--picture-card .el-upload-list__item-actions {
    width: 90px !important;
    height: 90px !important;
  }

  #supplierafter .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 90px !important;
    height: 90px !important;
  }

  #supplierafter .el-upload-list--picture-card .el-upload-list__item {
    width: 90px !important;
    height: 90px !important;
  }
</style>
<style lang="scss">
  .el-divider--horizontal {
    margin: 10px 0 !important;
  }

  .search-form-item {
    padding-bottom: 10px;
    padding-right: 20px;

    .el-form-item__label {
      font-size: 12px;
      font-weight: 500;
      // width:96px;
    }

    .el-input {
      width: 180px;
    }
  }
</style>
<style lang="scss" scoped>
  // .app-container {
  //   background-color: #fff !important;
  // }
  .marginBottom-10 {
    margin-bottom: 10px;
  }

  .marginRight-10 {
    margin-right: 10px;
  }

  .flex {
    display: flex;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
  }

  .button-box {
    font-size: 14px;
    text-align: right;
    font-size: 12px;

    .inquire-box {
      background: #1890ff;
      color: #ffffff;
    }

    .reset-box {
      background: #eeeeee;
    }
  }

  .app-container {
    background: #f3f5f7;

    .container-module {
      background: #fff;
      padding: 20px;
      border-radius: 5px;

      .title-module {
        font-size: 18px;
      }

      .search-module {
        padding-top: 20px;
        display: block;
      }

      .table-module {
        .table-top {
          margin-bottom: 20px;
        }

        .table-num {
          margin-left: 5px;
          background: #f0f0f0;
          width: 35px;
          border-radius: 5px;
        }
      }
    }
  }
  .refund_tracking_number{
    font-size: 14px;
    font-weight: 600;
  }
  .after_sales_status{
    display: flex;font-size: 14px;margin-top: 20px;
    .after_sales{
      color: #666;
      margin-bottom: 10px;
    }
    .status{
      display: flex;flex-direction: column;align-items: center;width: 100px;justify-content: flex-start;margin-right: 20px;
    }
  }
  .orderstatus{
    color: #0076f6;font-weight: 500;
  }

</style>
